<template>
  <PageWrapper v-loading="loadingRef">
    <div class="bg" ref="wrapEl">
      <a-space direction="vertical" style="width: 100%">
        <a-alert message="组件方式" />
        <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading"> 全屏 Loading </a-button>
        <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
        <Loading
          :loading="compState.loading"
          :absolute="compState.absolute"
          :background="compState.background"
          :tip="compState.tip"
        />

        <a-alert message="函数方式" />

        <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
        <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>

        <a-alert message="指令方式" />
        <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading"> 打开指令Loading </a-button>
      </a-space>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="assemblyIcon">
import { reactive, ref } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { Loading, useLoading } from '@/components/Loading'
const wrapEl = ref<ElRef>(null)

const loadingRef = ref(false)
const compState = reactive({
  absolute: false,
  loading: false,
  theme: 'dark',
  background: 'rgba(111,111,111,.7)',
  tip: '加载中...'
})
const [openFullLoading, closeFullLoading] = useLoading({
  tip: '加载中...'
})

const [openWrapLoading, closeWrapLoading] = useLoading({
  target: wrapEl,
  props: {
    tip: '加载中...',
    absolute: true
  }
})

function openLoading(absolute: boolean) {
  compState.absolute = absolute
  compState.loading = true
  setTimeout(() => {
    compState.loading = false
  }, 2000)
}

function openCompFullLoading() {
  openLoading(false)
}

function openCompAbsolute() {
  openLoading(true)
}

function openFnFullLoading() {
  openFullLoading()

  setTimeout(() => {
    closeFullLoading()
  }, 2000)
}

function openFnWrapLoading() {
  openWrapLoading()

  setTimeout(() => {
    closeWrapLoading()
  }, 2000)
}

function openDirectiveLoading() {
  loadingRef.value = true
  setTimeout(() => {
    loadingRef.value = false
  }, 2000)
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
